<template>
    <div class="login">
      <div class="close">
        <img @click="rollback" src="../../assets/guanbi.png" alt="">
      </div>
      <div class="graphic">
        <img src="../../assets/1557047684829.jpeg" alt="">
      </div>
      <div class="from">
        <input v-for="(val, key) in inputList"
               :class="{GetFocus: key === cut}"
               :type="val.type"
               :placeholder="val.placeholder"
               @focus="cursor(key,val)"
               :key="key"
               @blur="LoseFocus(key, val)">
        <p>找回密码</p>
        <button class="loginer">登录</button>
        <button @click="register">注册</button>
      </div>
    </div>
</template>

<script>
    export default {
      name: "login",
      data(){
        return{
          inputList:[
            {
              type: 'number',
              placeholder: '手机号'
          },{
              type: 'text',
              placeholder: '请输入密码'
          }],
          cut: -1,
        }
      },
      methods:{
        cursor(key,val){
          this.cut = key;
          val.placeholder = '';
        },
        LoseFocus(key, val){
          let arr = ['手机号','请输入密码'];
          this.cut = -1;
          val.placeholder = arr[key];
        },
        rollback(){
          this.$router.push({path:'./PersonalCenter'})
        },
        register(){
          this.$router.push({path:'./register'})
        }
      }
    }
</script>

<style scoped lang="scss">
.login{
  width: 100vw;
  height: 100vh;
  background: #fff;
  position: absolute;
  z-index: 999;
  box-sizing: border-box;
  padding: 70px 85px;
  .close{
    height: 50px;
    img{
      height: 100%;
    }
  }
  .graphic{
    width: 200px;
    height: 200px;
    margin:120px auto;
    border-radius: 50%;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .from{
    width: 100%;
    .GetFocus{
      caret-color: #000;
      color: #000;
      border-bottom-color: #abcdef;
    }
    input{
      height: 150px;
      line-height: 150px;
      border: none;
      width: 100%;
      color: #c7c7c7;
      border-bottom: 1px solid #e5e5e5;
      outline: none;
    }
  }
  p{
    font-size: 40px;
    margin: 0;
    line-height: 100px;
    text-align: right;
    color: #666;
  }
  button{
    display: block;
    margin-top: 45px;
    width: 100%;
    height: 140px;
    font-size: 50px;
    outline: none;
    color: #797979;
    border-radius: 15px;
    border: none;
    cursor:pointer
  }
  .loginer{
    background: -webkit-linear-gradient(left, #ff2d3d, #ff6437);
    color: #fff;
  }

}
</style>
